<template>
  <div>
    <el-form :inline="true" :model="query" label-width="130px" size="small">
      <!-- 孵化公司级别 -->
      <el-form-item label="孵化公司级别：" class="query-form-item">
        <el-select
          v-model="query.companyLevel"
          placeholder="请选择孵化公司级别"
          @change="onSubmit"
          clearable
        >
          <!-- <el-option label="全部" value></el-option> -->
          <el-option label="县级公司" value="4"></el-option>
          <el-option label="市级公司" value="3"></el-option>
          <el-option label="省级公司" value="2"></el-option>
          <el-option label="全球公司" value="1"></el-option>
        </el-select>
      </el-form-item>
      <!-- 申请状态 -->
      <el-form-item class="query-form-item" label="申请状态：">
        <el-select
          v-model="query.incubationAuditStatus"
          placeholder="请选择申请状态"
          @change="onSubmit"
          clearable
        >
          <el-option label="待审核" value="0"></el-option>
          <el-option label="通过(待生效)" value="1"></el-option>
          <el-option label="驳回" value="2"></el-option>
          <el-option label="已生效" value="3"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form :inline="true" :model="query" label-width="130px" size="small">
      <!-- 申请生成时间 -->
      <el-form-item label="申请生成时间：">
        <el-date-picker
          v-model="createTime"
          unlink-panels
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="left"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
          @change="dateChange"
        ></el-date-picker>
      </el-form-item>
      <!-- 申请商城账号查询 -->
      <el-form-item label="申请商城账号：" class="query-form-item">
        <el-input
          v-model="query.account"
          placeholder="申请商城账号"
          prefix-icon="el-icon-search"
          @keyup.enter.native="onSubmit"
          clearable
        ></el-input>
      </el-form-item>
      <!-- 查询框 -->
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-refresh"
          @click="onRest"
          size="small"
        ></el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="onSubmit"
          size="small"
          >查询</el-button
        >
        <el-button
          type="primary"
          @click="incubationCheck(1)"
          icon="el-icon-add"
          size="small"
          >通过</el-button
        >
        <el-button
          type="danger"
          @click="incubationCheck(2)"
          icon="el-icon-add"
          size="small"
          >驳回</el-button
        >
      </el-form-item>
    </el-form>
    <!-- table表单 -->
    <el-table
      ref="singleTable"
      :data="tableData"
      v-loading="loading"
      style="width: 100%"
      @selection-change="selectChange"
    >
      <el-table-column type="selection" :selectable="selectable" width="55">
      </el-table-column>
      <el-table-column label="序号" type="index" align="center" width="50">
      </el-table-column>
      <el-table-column
        prop="incubationAuditStatus"
        align="center"
        label="申请状态"
        width="120"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.incubationAuditStatus == 0"
            style="color: #ffa659"
            >待审核</span
          >
          <span
            v-else-if="scope.row.incubationAuditStatus == 1"
            style="color: #4acf1e"
            >通过(待生效)</span
          >
          <span
            v-else-if="scope.row.incubationAuditStatus == 2"
            style="color: #dc0101"
            >驳回
          </span>
          <span
            v-else-if="scope.row.incubationAuditStatus == 3"
            style="color: #dc0101"
            >已生效
          </span>
          <span v-else style="color: #dc0101">无 </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="userMobile"
        align="center"
        label="申请商城账号"
        width="140"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.userMobile">{{ scope.row.userMobile }}</span>
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="userEnterpriseName"
        align="center"
        label="申请商城公司名称"
        width="200"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.userEnterpriseName">{{
            scope.row.userEnterpriseName
          }}</span>
          <span v-else>无</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="companyLevel"
        align="center"
        label="申请孵化公司级别"
        width="180"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.companyLevel == 1" style="color: #ffa659"
            >全球品牌</span
          >
          <span v-else-if="scope.row.companyLevel == 2" style="color: #4acf1e"
            >省级</span
          >
          <span v-else-if="scope.row.companyLevel == 3" style="color: #4acf1e"
            >市级</span
          >
          <span v-else-if="scope.row.companyLevel == 4" style="color: #4acf1e"
            >县级</span
          >
        </template>
      </el-table-column>

      <el-table-column
        prop="createCompanyLevel"
        align="center"
        label="组建公司级别"
        width="180"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.createCompanyLevel == 1" style="color: #ffa659"
            >全球品牌</span
          >
          <span
            v-else-if="scope.row.createCompanyLevel == 2"
            style="color: #4acf1e"
            >省级</span
          >
          <span
            v-else-if="scope.row.createCompanyLevel == 3"
            style="color: #4acf1e"
            >市级</span
          >
          <span
            v-else-if="scope.row.createCompanyLevel == 4"
            style="color: #4acf1e"
            >县级</span
          >
          <span v-else style="color: #ffa659">无</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="company"
        align="center"
        label="组建公司名称"
        width="200"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.company">{{ scope.row.company }}</span>
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="incubationApplyTime"
        align="center"
        label="孵化申请时间"
        width="180"
      >
        <template slot-scope="scope">
          <i
            class="el-icon-time"
            v-if="scope.row.incubationApplyTime != null"
          ></i>
          <span v-if="scope.row.incubationApplyTime != null">{{
            scope.row.incubationApplyTime | formatDateStr("yyyy-MM-dd ")
          }}</span>
          <span v-else>无</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="incubationAuditTime"
        align="center"
        label="审核时间"
        width="180"
      >
        <template slot-scope="scope">
          <i
            class="el-icon-time"
            v-if="scope.row.incubationAuditTime != null"
          ></i>
          <span v-if="scope.row.incubationAuditTime != null">{{
            scope.row.incubationAuditTime | formatDateStr("yyyy-MM-dd ")
          }}</span>
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="incubationValidTime"
        align="center"
        label="生效时间"
        width="180"
      >
        <template slot-scope="scope">
          <i
            class="el-icon-time"
            v-if="scope.row.incubationValidTime != null"
          ></i>
          <span v-if="scope.row.incubationValidTime != null">{{
            scope.row.incubationValidTime | formatDateStr("yyyy-MM-dd ")
          }}</span>
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="companyIncorporationCertificate"
        align="center"
        label="组建公司凭证"
        width="180"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.companyIncorporationCertificate != null">
            <a
              :href="scope.row.companyIncorporationCertificate"
              download="下载公司组建凭证"
              target="_blank"
            >
              <el-button size="small" type="primary">点击下载</el-button>
            </a>
          </span>
          <span v-else
            ><el-button size="small" :disabled="true" type="info"
              >点击下载</el-button
            ></span
          >
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            size="small"
            :disabled="scope.row.incubationAuditStatus !== 0"
            type="primary"
            @click="incubationCheck(1, scope.row.incubateId)"
            >通过</el-button
          >
          <el-button
            size="small"
            :disabled="scope.row.incubationAuditStatus !== 0"
            type="danger"
            @click="incubationCheck(2, scope.row.incubateId)"
            >驳回</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="pagination-container"
      background
      :page-size="query.page.pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total,sizes,prev, pager, next, jumper"
      :current-page="this.query.page.currentPage"
      :page-sizes="[5, 10, 20, 30, 50]"
      :total="totalNumber"
    ></el-pagination>
  </div>
</template>
<script>
import { getList } from "../../api/incubationrules/index.js";
import {
  getCreateIncubationList,
  incubationCheck,
} from "../../api/incubationTeam/incubationTeam.js";
export default {
  data() {
    return {
      tableData: [], //列表集合
      createTime: [], //时间数组
      pickerOptions: {
        //快速选择日期
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      query: {
        companyLevel: "", //'1.全球品牌 2.省级 3.市级 4.县级''',
        incubationAuditStatus: "", //0.待审核 1.通过(待生效) 2.驳回 3.已生效'
        startDate: "", //开始时间
        endDate: "", //结束时间
        account: "",
        page: {
          currentPage: 1,
          pageSize: 5,
        },
      },

      selectData: [], //多选数组
      totalNumber: 0,
      loading: false,
    };
  },
  methods: {
    selectChange(val) {
      let arr = [];
      val.forEach((v) => {
        arr.push(v.incubateId);
      });
      this.selectData = arr;
    },

    // 表格多选disable
    selectable(row, index) {
      if (row.incubationAuditStatus == 0) {
        return true;
      } else {
        return false;
      }
    },
    /*日期选择事件*/
    dateChange(val) {
      if (val == null) {
        this.query.startDate = "";
        this.query.endDate = "";
      } else {
        this.query.startDate = val[0];
        this.query.endDate = val[1];
        this.query.currentPage = 1;
      }
      this.getList();
      console.log(this.query);
    },

    // 列表数据获取
    getList() {
      this.loading = true;
      getCreateIncubationList(this.query)
        .then((data) => {
          console.log(data);
          if (data.code != 0) {
            this.$message.error(data.message);
            this.loading = false;
            return false;
          }
          this.tableData = data.data.list || [];
          this.totalNumber = data.data.totalNumber || 0;
          // console.log(this.tableData)
          setTimeout(() => {
            this.loading = false;
          }, 0.3 * 1000);
        })
        .catch((err) => {
          this.loading = false;
          this.tableData = [];
        });
    },
    async incubationCheck(status, id) {
      let obj = {
        auditIncubateCompanyList: [],
      };
      if (id) {
        obj.auditIncubateCompanyList.push({
          auditRes: status,
          incubateId: id,
        });
      } else {
        if (this.selectData.length <= 0)
          return this.$message.info("请勾选后审核");
        this.selectData.forEach((v) => {
          obj.auditIncubateCompanyList.push({
            auditRes: status,
            incubateId: v,
          });
        });
      }
      try {
        const flag = await this.$confirm(
          status == 1 ? "是否要通过申请?" : "是否要驳回申请",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        );
        incubationCheck(obj)
          .then((data) => {
            console.log(data);
            if (data.code != 0) {
              this.$message.error(data.message);
              return false;
            }
            this.$message.success(data.message);
            this.getList();
          })
          .catch((err) => {
            this.getList();
            this.$message.error(err.message);
          });
      } catch {
        this.$message.info("已取消");
      }
    },
    //刷新
    onRest() {
      this.$router.push({
        path: "",
      });
      (this.createTime = []),
        (this.query = {
          companyLevel: "", //'1.全球品牌 2.省级 3.市级 4.县级''',
          incubationAuditStatus: "", //0.待审核 1.通过(待生效) 2.驳回 3.已生效'
          startDate: "", //开始时间
          endDate: "", //结束时间
          account: "",
          page: {
            currentPage: 1,
            pageSize: 5,
          },
        });

      this.getList();
    },

    //查询
    onSubmit() {
      this.query.page.currentPage = 1;
      this.getList();
      // console.log('submit!');
    },
    handleCurrentChange(val) {
      this.query.page.currentPage = val;
      //scrollTo(0, 800);
      this.getList();
    },
    handleSizeChange(val) {
      this.query.page.pageSize = val;
      this.getList();
    },
  },

  mounted() {},
  created() {
    this.getList();
  },
};
</script>


